"use client";

import React, { useState } from "react";
import Image from "next/image";
import ShoppingItem from "@/components/ShoppingItem";
import GuideItem from "@/components/GuideItem";
import { useRouter } from "next/navigation";
export default function Shopping() {
  const types = ["海淘攻略", "海淘导购"];
  const [active, setActive] = useState(0);

  const router = useRouter();
  
    function handleChangeType(type: number) {
      setActive(type)
      router.push(`/shopping-guide/${type == 0 ? "strategy" : "guide"}`);
    }
  return (
    <>
      <section className="bg-module_bg bg-center bg-[length:1920px_650px] h-[650px]  overflow-auto">
        <div className="w-[1200px]  mx-auto">
          <Image
            src={"/assets/shoping/Discount and Guide.png"}
            className="mt-[256px]"
            alt=""
            width={560}
            height={60}
          ></Image>

          <Image
            src={"/assets/shoping/shoping.png"}
            className="mt-3"
            alt=""
            width={300}
            height={60}
          ></Image>
        </div>
      </section>
      <section className="bg-repect_bg bg-repeat-y  bg-top bg-[length:1920px_1640px]">
        <div className="w-[1400px]  mx-auto -translate-y-[50px]">
          <div className="w-[1400px] h-[100px] bg-white rounded-[20px] py-5">
            <ul className="flex justify-center gap-[115px] h-[60px]">
              {types.map((item, index) => {
                return (
                  <li
                    key={index}
                    className={`inline-block leading-[60px] hover:text-[#FFA018] text-[22px] text-center cursor-pointer ${
                      active == index ? "text-[#FFA018]" : ""
                    }`}
                    onClick={() => handleChangeType(index)}
                  >
                    {item}
                  </li>
                );
              })}
            </ul>
          </div>

          <div
            className="w-[1400px] mt-[70px] bg-white rounded-[20px] px-[50px] py-[60px] grid grid-cols-3 
            gap-x-[30px] gap-y-[60px] 
          "
          >
            {Array.from({ length: 6 }).map((_, index) => {
              return <ShoppingItem key={index} />;
            })}
          </div>


        </div>
      </section>
    </>
  );
}
